<template>
  <div>
    <div class="xq-form-wrapper">
      <header class="header-flex">
        <div class="l_title">
          打卡规则
        </div>
        <a-button type="primary" @click="addRules">
          <a-icon type="plus" />
          添加规则
        </a-button>
      </header>
      <a-spin :spinning="spinning" class="xq-form-content" style="margin-top: 24px">
        <XqTable
          :customize="FormJson['config']['table']['customize']"
          :scroll="{ x: columns.length * 150 }"
          :pagination="false"
          :dataSource="tableData"
          :columns="columns"
          class="xq-form-content-table"
        >
          <template v-for="(col, index) in columns" v-slot:[`xq_${col.dataIndex}`]>
            <span :key="index">
              {{ col.customTitle }}
            </span>
          </template>
          <!-- eslint-disable-next-line prettier/prettier -->
          <template v-for="(col, index) in columns" v-slot:[col.dataIndex]="text, record">
            <div v-if="col.dataIndex === 'punchTimeList'" :key="index">
              <a-tag v-for="tag in text[0].workWeekList" :key="tag" class="mg_b10" color="#6A66F6">{{ tag }}</a-tag>
              <a-row v-for="(inneritem, j) in text[0].periodList" :key="j">
                上班 {{ inneritem.startPeriod }} - 下班{{ inneritem.endPeriod }}
              </a-row>
            </div>

            <div v-else-if="col.dataIndex === 'locationList'" :key="index">
              <div class="locationList-box">
                <a-tooltip v-for="pos in text" :key="pos.positioname" placement="bottomLeft">
                  <template slot="title">
                    {{ pos.positionName }}
                  </template>
                  {{ pos.positionName }}
                </a-tooltip>
              </div>
            </div>
            <div v-else-if="col.dataIndex === 'wifiList'" :key="index">
              <a-tooltip v-for="item in text" :key="item.macAddr" placement="bottomLeft">
                <template slot="title">
                  {{ item.name + "&nbsp;&nbsp;&nbsp;" + item.macAddr }}
                </template>
                {{ item.name + "&nbsp;&nbsp;&nbsp;" + item.macAddr }}<br />
              </a-tooltip>
            </div>
            <span v-else-if="col.dataIndex === 'tableAction'" :key="index">
              <span class="tc-theme cursor" @click="editor(record)">
                编辑
              </span>
              <a-divider class="tc-theme" type="vertical" />
              <a-popconfirm title="确定删除?" ok-text="确定" cancel-text="取消" @confirm="deleteItem(record)">
                <span class="tc-theme cursor">删除</span>
              </a-popconfirm>
            </span>
            <XqTableCell v-else :key="index" :record="record" :field="FormJson['fields'][col.dataIndex]" :dynamicData="dynamicData" />
          </template>
        </XqTable>
        <div class="xq-form-content-pagination">
          <div class="xq-form-content-pagination-total">共 {{ total }} 条</div>
          <a-pagination
            v-model="pageNo"
            :page-size="pageSize"
            :total="total"
            :show-size-changer="true"
            :show-quick-jumper="true"
            :page-size-options="['10', '20', '50', '100']"
            @change="onPageChange"
            @showSizeChange="onPageSizeChange"
          />
        </div>
      </a-spin>
    </div>
  </div>
</template>

<script>
import FormJson from "./FormJson";
import XqCurdMixin from "xqjr-plugin-form/mixins/XqCurdMixin";

const curdMixin = new XqCurdMixin({
  FormJson,
  tableConfigKey: "table"
});

import { Check, CheckWork } from "@/api/check";

export default {
  mixins: [curdMixin],
  data() {
    return {
      spinning: false,
      tableData: [],
      total: 0,
      pageNo: 1,
      pageSize: 10
    };
  },

  created() {
    this.getCheck();
  },

  methods: {
    async getCheck() {
      try {
        this.spinning = true;
        const { data } = await Check({
          url: CheckWork.checkSet,
          params: { companyId: this.$store.state.hr.companyId, pageNo: this.pageNo, pageSize: this.pageSize }
        });
        this.tableData = data.entities;
        this.total = data.entityCount;
        setTimeout(() => (this.spinning = false), 500);
      } catch (err) {
        console.log("error log --> ", err);
        setTimeout(() => (this.spinning = false), 500);
      }
    },
    onPageChange(page) {
      this.pageNo = page;
      this.getCheck();
    },
    onPageSizeChange(current, pageSize) {
      this.pageSize = pageSize;
      this.getCheck();
    },
    editor(record) {
      this.$router.push(`/check/checkSet/checkEditorRules/${record.id}`);
    },
    //  删除
    deleteItem(record) {
      Check({
        url: CheckWork.deleteCheckList + `/${record.id}`,
        method: "DELETE"
      }).then(data => {
        !data.success
          ? Promise.reject(false)
          : this.$notification.success({
              message: "删除成功"
            });
        this.getCheck();
      });
    },
    // 添加规则
    addRules() {
      this.$router.push(`/check/checkSet/checkEditorRules/${0}`);
    }
  }
};
</script>
<style lang="scss" scoped>
.header-flex {
  display: flex;
  justify-content: space-between;
  padding-top: 21px;
}
.locationList-box {
  max-width: 300px;
  max-height: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
